<script type="text/javascript" src="${basePath}/js/topo/jtopo-0.4.8-min.js"></script>
<script type="text/javascript" src="${basePath}/js/tds-mappingtopo.js"></script>
<script type="text/javascript" src="${basePath}/js/bootstrap/beyond.min.js"></script>

<style>
#menu{
width:1300px;
height:900px;
position: relative;
margin: 0px auto;
}
#contextmenu{
position: absolute;
top: 290px;
left: 290px;
background-color: rgbs(0,85,116,0.7);
padding: 10px 20px 5px 20px;
border-radius:10px 10px;
}
</style>
<body>

<div id="menu" class="s_data s_relative xm_s_dataj">

<!-- <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div> -->
<!-- <div class="alert alert-success" role="alert"><i class="fa fa-tags blue"></i>  拓扑图 ( 控制器   主机组   主机  卷)</div>
 --> <div class="ibox-title ibox-title-allatatus ">
                <div class="status-title">
                   <h3 id="overall_status_total"><i class="fa fa-tags blue"></i>  <@spring.message code='topo.title'/></h3>
                </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="btn-group" >
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <@spring.message code='button.hint'/> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#"><@spring.message code='topo.tip'/></a></li>
    <!-- <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li> -->
  </ul>
</div>
 </div> 
	<div id="contextmenu" style="display:none;" >
            <ul >  
                <li ><a id="removeHostMappingBtn" class="btn btn-primary" href="javascript:void(0);" onclick=""><@spring.message code='host.removeMapping'/></a>
                </li>
                <li ><a id="removeLunMappingBtn" class="btn btn-primary" href="javascript:void(0);" onclick=""><@spring.message code='lun.removeMapping'/></a>
                </li> 
                <li ><a id="addTargetBtn" class="btn btn-primary" href="javascript:void(0);" onclick=""></a>
                </li>
                <li ><a id="removeMappingBtn" class="btn btn-primary shiny" href="javascript:void(0);" onclick=""><@spring.message code='group.unmapping'/></a>
                </li>
               
                <li ><a id="addLunBtn" style="display: none;" class="btn btn-primary" href="javascript:void(0);" onclick=""><@spring.message code='group.addLuns'/></a>
                </li>
                <li><a id="editTargetBtn" class="btn btn-primary" href="javascript:void(0);"
   		        	onclick=""><@spring.message code='button.edit'/></a>
                </li>
                <li><a id="detailsTargetBtn" class="btn btn-primary" href="javascript:void(0);" onclick=""><@spring.message code='target.details'/></a>
                </li>
                <li> <a id="removeTargetBtn" class="btn btn-danger" href="javascript:void(0);"
    		        onclick=""><@spring.message code='button.remove'/></a>
                </li>  
            </ul>
	</div>
	<canvas width="1200" height="550" id="canvas" style="margin: 4px;">
            
	</canvas>
	
	<form id="listGroupForm" action="${basePath}/mapping/hg/listNoAction" method="get"  ></form>
	<form id="listHostForm" action="${basePath}/mapping/host/list" method="get"></form>
	<form id="listLunForm" action="${basePath}/mapping/luns" method="get"></form>
	<form id="listMappedLunForm" action="${basePath}/mapping/list" method="get"></form>
</div>
<input style="display: none;" id="objectId" value=""/>

<input style="display: none;" id="mappingName" value=""/>
<div id="editTargetDialog"></div>

</body>
<script>


var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
	$(document).ready(function(){
	//获取target，hostgroup,host,lun的信息
		$.ajax({
			type : "get",
			url : baseURL + "/mapping/topo",
			dataType : "json",
			success : function(json) {
				generateTopoView(json.data);
			}
		});
	//创建弹簧链上的节点	
		function create_node(x, y, name){
				var node = new JTopo.CircleNode(name);
				node.radius = 20;
				node.fillColor = JTopo.util.randomColor();
				node.setLocation(x, y);
				scene.add(node);
				return node;
		}
	//生成拓扑图	
		function generateTopoView(json) {
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			var scene = new JTopo.Scene(stage);
			
			
			title();
			
			function create_node(x, y, name){
				var node = new JTopo.CircleNode(name);
				node.radius = 20;
				node.fillColor = JTopo.util.randomColor();
				node.setLocation(x, y);
				scene.add(node);
				return node;
		     }
		
			//var textNode = new JTopo.TextNode('提示:双击节点可将其展开，双击弹簧链可进行创建操作，右击节点可对其操作');
           // textNode.font = 'bold 16px 微软雅黑';
           // textNode.fontColor = "#000000";
           // textNode.setLocation(10, 535);
           // scene.add(textNode);
            
			var nodesCache = {};	// 存放target节点
			var childrenCache = {};	// 存放{id:[nodes]}
			
			var initWidth = 5;
			var initHeight = 40;
			var initX = 300;
			var initY = 100;
			var jsonData=json;
			// 计算间隔
			var gap = getGap(json.length);
			//循环所有的target，将target放入nodesCach[targetId:target对象]
			for(var i = 0; i < json.length; i++) {
				var hgs = json[i].hgList;
				// target节点
				var targetNode = node(initX + gap * i, initY, 0, hgs,jsonData);
				targetNode.text = json[i].name;
				targetNode.fontColor = "#000000";
				targetNode.value = json[i].id;
				targetNode.data = json[i];
				targetNode.type = 0;	// type 0表示target
				nodesCache[json[i].id] = targetNode;
				//childrenCache[json[i].id] = targetNode;
			    }
			
			/**
			 * 拓扑展示
			 * @param parentNode
			 * @param data
			 **/
			function childrenTopo(parentNode, data,type,jsonData) {
				var x = parentNode.getBound().left;
				var w = parentNode.getBound().width;
				var l = data.length;
				//循环所有子元素
				for (var j = 0; j < data.length; j++) {
					var hgname = data[j].name;
				    var str = "";
				    //循环所有元素
				  for(var q = 0; q < jsonData.length; q++) {
				  //得到子元素
				     var hgsData = jsonData[q].hgList;
				     //循环子元素，循环到对应节点时，在警示标志上显示映射的父节点d名字
				     for (var y = 0; y < hgsData.length; y++) {
				       if(hgsData[y].name==hgname){
				       str +=jsonData[q].name+",";
				        }
				     }
		          } //创建节点
					var childNode = node(getX(x, w, l, j), parentNode.getBound().top + 130, 1, data[j],jsonData);
					//var childNode = node(getX(x, w, l, j), initY * (2 + parentNode.type) + initHeight, 1, data[j],jsonData);
					
					if (str.length > 0) {
                       str = str.substr(0,str.length - 1);
                    }
                    childNode.mappingName=str;
					childNode.text ="HostGroupName:"+hgname+"\n\n\n"+"Mapping:" + str;			// 映射信息
					childNode.font = '0px 微软雅黑';
					childNode.value = data[j].id;			// 节点值
					childNode.data = data[j];				// 节点数据
					childNode.type = parentNode.type + 1;	// 当前节点类型
					//childNode.fontColor = "#000000";
					linkNode(parentNode, childNode);
					// 临时存放节点信息
					//nodesCache[data[j].id] = childNode;
					nodesCache[parentNode.value].push(childNode);
					//存放子节点信息键为父节点id，值为子节点
					childrenCache[parentNode.value].push(childNode);
				}//循环结束
			}//方法结束
			
			function hgChildren(hgNode, data,jsonDate) {
			    
				var hostData = data.hostList, lunData = data.lunList;
				var x = hgNode.getBound().left;
				var y = hgNode.getBound().top;
				var g = 10, hg = g * 2 + 25;
				var hl = hostData.length;
				var ll = lunData.length;
				var hx = x - 100, hy = y + 60;
				var lx = x + 100, ly = y + 60;
				var lw = hw = 50, hh = hl * hg,lh=ll*hg;
				
				drawHosts(hostData,jsonDate,hgNode);
				drawLuns(lunData,jsonDate);
				//显示主机组映射的所有主机
				function drawHosts(hostData,jsonDate,hgNode) {
				/* 
				var container = new JTopo.Container('host');
				container.setBound(hx, hy, hw, hh);
                container.textPosition = 'Middle_Center';
                container.fontColor = '100,255,0';
                container.font = '18pt 微软雅黑';
                container.borderColor = '255,0,0';
                container.borderRadius = 30; // 圆角
                container.dragable = false;
				container.type = hgNode.type + 1;
                scene.add(container);
					if(hl!=0){
					linkNode(hgNode, container);
					childrenCache[hgNode.value].push(container);
					}
					for (var i = 0; i < hl; i++) {
						var hostNode = node(hx, (hy + g) + hg * i);
						//hostNode.text = hostData[i].name;
						hostNode.data = hostData[i];
						hostNode.type = hgNode.type + 1;
						hostNode.dragable = false;
						container.add(hostNode);
						// 临时存放节点信息
						nodesCache[hostData[i].id] = hostNode;
						childrenCache[hgNode.value].push(hostNode);
						if((h1-6*parseInt(i/6))>0){
						var hostNode = node(hx+parseInt(i/6)*10, (hy + g) + hg * ((i%6)-1));
						//hostNode.text = hostData[i].name;
						hostNode.data = hostData[i];
						hostNode.type = hgNode.type + 1;
						hostNode.dragable = false;
						container.add(hostNode);
						// 临时存放节点信息
						nodesCache[hostData[i].id] = hostNode;
						childrenCache[hgNode.value].push(hostNode);
						}
					}
				 *///存放主机的框子
					var hostFrame = new JTopo.Node();
					//hostFrame.fontColor = "white";
					hostFrame.alpha = 0.3;	
					if(hl>6){
					//hostFrame.alpha = 0.3;
					hostFrame.setBound(hx-5, hy+5, hw+parseInt(hl/6)*30, 6 * hg);
					}else{
					hostFrame.setBound(hx-5, hy+5, hw, hh);
					}	
					/* if(ll==0){
					hostFrame.setBound(x, hy, hw, hh);
					} */		
					hostFrame.dragable = false;
					hostFrame.type = hgNode.type + 1;
					/* hostFrame.text='host'; */
					//node.fillColor = "#ffffff";
					scene.add(hostFrame);
					
					if(hl!=0){
					//连接框子和主机组
					linkNode(hgNode, hostFrame,true);
					nodesCache[hgNode.value].push(hostFrame);
					//往childrenCache中存放，键为主机组id,值为框子节点
					childrenCache[hgNode.value].push(hostFrame);
					for (var i = 0; i < hl; i++) {
						var hname = hostData[i].name;
						if((hl-6*(parseInt(i/6)+1))>0){
						var hostStr = "";
						//在主机警示标志上显示主机组名字
				        for(var w = 0; w < jsonData.length; w++) {
				              var hgsData = jsonData[w].hgList;
				            for (var e = 0; e < hgsData.length; e++) {
				                var hDate = hgsData[e].hostList;
				              for(var u = 0;u <hDate.length;u++){
				                 if(hDate[u].name==hname){
				                   hostStr +=hgsData[e].name+",";
				                  } 
				              }
		                  	} 
		              	} 
						var hostNode = node(hx+parseInt(i/6)*40, (hy + g) + hg * (i-6*(parseInt(i/6))),2);
					/* 	if(ll==0){alert(4);
					var hostNode = node(x, (hy + g) + hg * i);
					} */
					 	
					if (hostStr.length > 0) {
                       hostStr = hostStr.substr(0,hostStr.length - 1);
                       var result;
                       var list = hostStr.split(",");
                       var json={};
                       for(var m=0; m<list.length; m++){
                         //if(result.indexOf(list(m)) == -1 ){
                         //result = result + list(m) + ",";
                         //alert("ff");
                      //  } 
                       if(list[m]!=""){
                       json["a" + list[m]] = list[m]; 
                       }
                       var str2 = "";
                          for (var key in json) {
                          str2 += "," + json[key];
                            } 
                       }  
                       var s = str2.toString(); 
                       if (s.substr(0, 1) == ',') {
                          s = s.substr(1);
                          }
                       hostNode.text ="HostName:"+hname+"\n\n\n"+"Mapping:" + s;			// 节点名称
					   //hostNode.font='0px';
					    hostNode.font = '0px 微软雅黑';
						hostNode.data = hostData[i];
						hostNode.type = hgNode.type + 1;
						hostNode.dragable = false;
						hostNode.name = "host";
						hostNode.mappingName=s;
						hostNode.value = hostData[i].id;
						// 临时存放节点信息
						//nodesCache[hostData[i].id] = hostNode;
						nodesCache[hgNode.value].push(hostNode);
						childrenCache[hgNode.value].push(hostNode);
                    } 
						} else{
						
						var hostStr = "";
				        for(var w = 0; w < jsonData.length; w++) {
				              var hgsData = jsonData[w].hgList;
				            for (var e = 0; e < hgsData.length; e++) {
				                var hDate = hgsData[e].hostList;
				              for(var u = 0;u <hDate.length;u++){
				                 if(hDate[u].name==hname){
				                   hostStr +=hgsData[e].name+",";
				                  } 
				              }
		                  	} 
		              	} 
						var hostNode = node(hx+parseInt(i/6)*40, (hy + hg+g)+ hg * ((i%6)-1),2);
						if (hostStr.length > 0) {
                       hostStr = hostStr.substr(0,hostStr.length - 1);
                       var result;
                       var list = hostStr.split(",");
                       var json={};
                       for(var m=0; m<list.length; m++){
                         //if(result.indexOf(list(m)) == -1 ){
                         //result = result + list(m) + ",";
                         //alert("ff");
                      //  } 
                       if(list[m]!=""){
                       json["a" + list[m]] = list[m]; 
                       }
                       var str2 = "";
                          for (var key in json) {
                         str2 += "," + json[key];
                            } 
                       }  
                       var s = str2.toString(); 
                       if (s.substr(0, 1) == ',') {
                          s = s.substr(1);
                          }
                        hostNode.text ="HostName:"+hname+"\n\n\n"+"Mapping:" + s;			// 节点名称
					    hostNode.font = '0px 微软雅黑';
						//hostNode.text = hostData[i].name;
						hostNode.data = hostData[i];
						hostNode.type = hgNode.type + 1;
						hostNode.dragable = false;
						hostNode.name = "host";
						hostNode.value = hostData[i].id;
						hostNode.mappingName=s;
						// 临时存放节点信息
						//nodesCache[hostData[i].id] = hostNode;
						nodesCache[hgNode.value].push(hostNode);
						childrenCache[hgNode.value].push(hostNode);
                    }
						}
					}
					}
					
				}
				
				function drawLuns() {
					var lunFrame = new JTopo.Node();
					if(ll>6){
					lunFrame.setBound(lx-5, ly+5, lw+parseInt(ll/6)*30, 6 * hg);
					}else{
					lunFrame.setBound(lx-5, ly+5, lw, lh);
					}
					lunFrame.dragable = false;
					lunFrame.alpha = 0.3;
					lunFrame.type = hgNode.type + 1;
					//node.fillColor = "#ffffff";
					scene.add(lunFrame);
					if(ll!=0){
					linkNode(hgNode, lunFrame,true);
					nodesCache[hgNode.value].push(lunFrame);
					childrenCache[hgNode.value].push(lunFrame);
					for (var i = 0; i < ll; i++) {
					var lname = lunData[i].name;
					if((ll-6*(parseInt(i/6)+1))>0){
					var lunStr = "";
				        for(var a = 0; a < jsonData.length; a++) {
				              var hgsData = jsonData[a].hgList;
				            for (var c = 0; c < hgsData.length; c++) {
				                var lDate = hgsData[c].lunList;
				              for(var v = 0;v <lDate.length;v++){
				                 if(lDate[v].name==lname){
				                   lunStr +=hgsData[c].name+",";
				                  } 
				              }
		                  	} 
		              	} 
						var lunNode = node(lx+parseInt(i/6)*40, (hy + g) + hg * (i-6*(parseInt(i/6))),3);
					if (lunStr.length > 0) {
                       lunStr = lunStr.substr(0,lunStr.length - 1);
                       var result;
                       var list = lunStr.split(",");
                       var json={};
                       for(var b=0; b<list.length; b++){
                         
                       if(list[b]!=""){
                       json["a" + list[b]] = list[b]; 
                       }
                       var str2 = "";
                          for (var key in json) {
                         str2 += "," + json[key];
                            } 
                       }  
                       var s = str2.toString(); 
                       if (s.substr(0, 1) == ',') {
                          s = s.substr(1);
                          }
                       lunNode.text ="LunName:"+lname+"\n\n\n"+"Mapping:" + s;			// 节点名称
					   //hostNode.font='0px';
					    lunNode.font = '0px 微软雅黑';
					    lunNode.name="lun";
						lunNode.data = lunData[i];
						lunNode.type = hgNode.type + 1;
						lunNode.dragable = false;
						lunNode.value = lunData[i].id;
						// 临时存放节点信息
						//nodesCache[lunData[i].id] = lunNode;
						nodesCache[hgNode.value].push(lunNode);
						childrenCache[hgNode.value].push(lunNode);
                          
                    } 
						} else{
						
						var lunStr = "";
				        for(var n = 0; n < jsonData.length; n++) {
				              var hgsData = jsonData[n].hgList;
				            for (var m = 0; m < hgsData.length; m++) {
				                var lDate = hgsData[m].lunList;
				              for(var j = 0;j <lDate.length;j++){
				                 if(lDate[j].name==lname){
				                  lunStr +=hgsData[m].name+",";
				                  } 
				              }
		                  	} 
		              	} 
						var lunNode = node(lx+parseInt(i/6)*40, (hy + hg+g)+ hg * ((i%6)-1));
						if (lunStr.length > 0) {
                       lunStr = lunStr.substr(0,lunStr.length - 1);
                       var result;
                       var list = lunStr.split(",");
                       var json={};
                       for(var m=0; m<list.length; m++){
                         //if(result.indexOf(list(m)) == -1 ){
                         //result = result + list(m) + ",";
                         //alert("ff");
                      //  } 
                       if(list[m]!=""){
                       json["a" + list[m]] = list[m]; 
                       }
                       var str2 = "";
                          for (var key in json) {
                         str2 += "," + json[key];
                            } 
                       }  
                       var s = str2.toString(); 
                       if (s.substr(0, 1) == ',') {
                          s = s.substr(1);
                          }
                        lunNode.text ="LunName:"+lname+"\n\n\n"+"Mapping:" + s;			// 节点名称
				    	lunNode.font = '0px 微软雅黑';
						lunNode.data = lunData[i];
						lunNode.type = hgNode.type + 1;
						lunNode.dragable = false;
						 lunNode.name="lun";
						 lunNode.value = lunData[i].id;
						// 临时存放节点信息
						//nodesCache[lunData[i].id] = lunNode;
						nodesCache[hgNode.value].push(lunNode);
						childrenCache[hgNode.value].push(lunNode);
                    }
						}
					}
					}
				}
			}
			/**
			 * 清空同级子节点
			 * @param node 当前节点
			 **/
			function clearChildren(node) {
			/* context.clearRect(0,0,canvas.width,canvas.height);
			 */	 
				for (var k in childrenCache) {
					var nodes = childrenCache[k];
					for (var i = 0; i < nodes.length; i++) {
						if (nodes[i].type > node.type) {
							scene.remove(nodes[i]);
						}
					}
					//childrenCache[k] = [];
				}
    		}
    		/**
			 * 清空自身子节点
			 * @param node 当前节点
			 **/
			function clearSelf(node) {
			/* context.clearRect(0,0,canvas.width,canvas.height);
			 */	 
				for (var k in nodesCache) {
					var nodes = nodesCache[k];
					for (var i = 0; i < nodes.length; i++) {
						if (nodes[i].type > node.type) {
							scene.remove(nodes[i]);
						}
					}
					//childrenCache[k] = [];
				}
    		}
			//var currentNode = null;
			function node(x, y, type, data,jsonData){
				var node = new JTopo.Node();
				node.setLocation(x, y);
				if (type == 0) {
					// target
					node.setImage(baseURL + '/css/images/topo/target.png', true);				
				} else if (type == 1) {
					// hg
					node.setImage(baseURL + '/css/images/topo/hostgroup.png', true);
				} else if (type == 2) {
					// host
					node.setImage(baseURL + '/css/images/topo/zhuji.png', true);
				} else {
				   // lun
					node.setImage(baseURL + '/css/images/topo/lun.png', true);
				}
				node.mouseover(function(){
					node.alarm = node.text;
					node.alarmColor = '0,0,200';
					if(type==0){
					node.alarm = null;
					}
					//this.text = text;
				});
				node.mouseout(function(){
					node.alarm = null;
				});
				node.dbclick(function() {/* scene.remove(node); */
				 	// 准备存放子节点
					childrenCache[node.value] = [];
					// 清空所有同级节点的子节点
					clearChildren(node);
					
					clearSelf(node);
					// 加载子节点
					/* for (var k in childrenCache) {
					
					var nodes = childrenCache[k];
					for (var i = 0; i < nodes.length; i++) {
						
						alert(nodes[i].value);
					}
				   }   */
					if (type == 0) {
					//alert(node.value);
					//childrenCache[node.value] = 1;
					//alert(childrenCache.length);
					/*  for (var k in childrenCache) {
					
					var nodes = childrenCache[k];
					for (var i = 0; i < nodes.length; i++) {
						
						alert(nodes[i].value);
					}
				   }  
				    */
					/* for (var k in nodesCache) {
					var nodes = nodesCache[k];
					for (var i = 0; i < nodes.length; i++) {
						if (nodes[i].type > node.type) {
							scene.remove(nodes[i]);
						}
					}
					//childrenCache[k] = [];
				} */    nodesCache[node.value] = [];
						childrenTopo(node, data, type,jsonData);
						
					} else {
					    nodesCache[node.value] = [];
						hgChildren(node, data,jsonData);
					}
				});
				
				var currentNode = null;
				
				 node.addEventListener('mouseup', function(event){
                 currentNode = this;
                // handler(event); 
                 if(event.button == 2){
                 
                  var id = node.value;
                  //alert(id);
                  $("#objectId").val(id);
                  var objectType = node.type;
                   var name = node.name;
                  if(objectType==0){
                  $("#addTargetBtn").show();
                  $("#removeMappingBtn").show();
                  $("#removeMappingBtn").attr("onclick","Target.showGroups(id);");
                  $("#removeHostMappingBtn").hide();
                  $("#removeLunMappingBtn").hide();
                  $("#editTargetBtn").attr("onclick","Target.edit();");
                  $("#addTargetBtn").attr("onclick","Target.showGroups(id,'other');");
                  $("#addTargetBtn").text(localeMsg.target.addHostGroups);
                  $("#addLunBtn").hide();
                  $("#removeTargetBtn").attr("onclick","Target.removeTarget();");
                  $("#detailsTargetBtn").attr("onclick","Target.showTargetDetails();");
                  // 右键
                    // 当前位置弹出菜单（div）
                      $("#contextmenu").css({
                         //width=100px;
                         //top: event.clientX-canvas.getBoundingClientRect().top,
                         //left: event.clientY-canvas.getBoundingClientRect().left, 
                       // color: "#ff0011", 
                        top:node.getBound().top+45,
                        left:node.getBound().left+70,
                        background: "#789"
                    }).show();  
                  }
                  if(objectType==1){
                  $("#addTargetBtn").show();
                  $("#removeMappingBtn").hide();
                  //$("#removeMappingBtn").attr("onclick","Group.saveTargetGroups(id);");
                  $("#removeHostMappingBtn").show();
                  $("#removeHostMappingBtn").attr("onclick","Group.showHosts(id);");
                  $("#removeLunMappingBtn").show();
                  $("#removeLunMappingBtn").attr("onclick","Group.showMappings(id);");
                  $("#editTargetBtn").attr("onclick","Group.edit();");
                  $("#addTargetBtn").attr("onclick","Group.showHosts(id,'other');");
                  $("#addTargetBtn").text(localeMsg.host.add);
                  $("#addLunBtn").show();
                  $("#addLunBtn").attr("onclick","Group.showLuns();");
                  $("#removeTargetBtn").attr("onclick","Group.removeHostGroup();");
                  $("#detailsTargetBtn").attr("onclick","Group.showHostGroupDetails();");
                 /*  $("#addTargetBtn").onmouseover(function(){
                  alert("g");
                  }) */
                  //alert(node.mappingName);
                  // 右键
                    // 当前位置弹出菜单（div）
                      $("#contextmenu").css({
                         //width=100px;
                         //top: event.clientX-canvas.getBoundingClientRect().top,
                         //left: event.clientY-canvas.getBoundingClientRect().left, 
                       // color: "#ff0011", 
                        top:node.getBound().top+45,
                        left:node.getBound().left+70,
                        background: "#789"
                    }).show();  
                  var mappingName = node.mappingName;
                  $("#mappingName").val(mappingName);
                  }
                 
                 
                  if(name=="host"){
                  $("#removeMappingBtn").hide();
                  $("#removeHostMappingBtn").hide();
                  $("#removeLunMappingBtn").hide();
                  $("#editTargetBtn").attr("onclick","Host.edit();");
                  $("#addTargetBtn").hide();
                  $("#addLunBtn").hide();
                  $("#removeTargetBtn").attr("onclick","Host.removeHost();");
                  $("#detailsTargetBtn").attr("onclick","Host.showHostDetails();");
                      var mappingName = node.mappingName;
                  $("#mappingName").val(mappingName);
                  // 右键
                    // 当前位置弹出菜单（div）
                      $("#contextmenu").css({
                         //width=100px;
                         //top: event.clientX-canvas.getBoundingClientRect().top,
                         //left: event.clientY-canvas.getBoundingClientRect().left, 
                       // color: "#ff0011", 
                        top:node.getBound().top+45,
                        left:node.getBound().left+70,
                        background: "#789"
                    }).show();  
                  }
                 
                  if(name=="lun"){ $("#contextmenu").hide();
                  /* $("#editTargetBtn").attr("onclick","Host.edit();");
                  $("#addTargetBtn").hide();
                  $("#addLunBtn").hide();
                  $("#removeTargetBtn").attr("onclick","Host.removeHost();");
                  $("#detailsTargetBtn").attr("onclick","Host.showHostDetails();"); */
                  }
                  
                      
                   }  
                  
                });
                 
                
                
				scene.add(node);
				return node;
			}
			/* function handler(event){
                if(event.button == 2){// 右键
                    // 当前位置弹出菜单（div）
                    $("#contextmenu").css({
                        top: event.pageY,
                        left: event.pageX
                    }).show();    
                }
            } */
            stage.click(function(event){
                if(event.button == 0){// 单击
                    // 关闭弹出菜单（div）
                    $("#contextmenu").hide();
                }
            });
			function linkNode(nodeA, nodeZ, f){
				var link;
				if(f){
					link = new JTopo.FoldLink(nodeA, nodeZ);
					//link.textOffsetY = -3;
					
				}else{
					link = new JTopo.Link(nodeA, nodeZ);
					
				}
				//link.arrowsRadius = 10;
				link.strokeColor = '127,173,232';
				link.direction = 'horizontal';
				scene.add(link);
				return link;
			}
			
			function hostLink(nodeA, nodeZ){				
				var link = new JTopo.FlexionalLink(nodeA, nodeZ);				
				link.shadow = false;
				link.offsetGap = 44;
				scene.add(link);
				return link;
			}
			
			function getGap(length) {
				return length == 1 ? (canvas.width - initWidth * length - initX * 2) :
					(canvas.width - initWidth * length - initX * 2) / (length - 1);
			}
			function title(){
			// 节点
			var tNode = create_node(3, 100, 'Target');
			tNode.textPosition = 'Middle_Right';
			tNode.fontColor = JTopo.util.randomColor();;
			var node = create_node(3, 100, 'HostGroup');
			node.textPosition = 'Middle_Right';
			node.fontColor = JTopo.util.randomColor();;
			var node2 = create_node(3, 100, 'Host(左列) Lun(右列)');
			node2.textPosition = 'Middle_Right';
			node2.fontColor = JTopo.util.randomColor();;
			tNode.dbclick(function(){
					
					Target.create();
			});
			/* tNode.mouseover(function(){
					
					Target.create();
			}); */
			node.dbclick(function(){
					
					Group.create();
			}); 
			node2.dbclick(function(){
					
					Host.create();
			});
			// 连线
			scene.add(new JTopo.Link(tNode, node));
			scene.add(new JTopo.Link(node, node2));	
			// 弹性效果（引力、摩擦系数)
			var effect = JTopo.Effect.spring({
				grivity: 10 // 引力 (可以为负值)
			})
			
			// 效果作用对象(node节点以targetNode为目标，产生弹性效果)
			effect.addNode(node, tNode);
			effect.addNode(node2, node);
			// 播放
			effect.play();
			}
			
			function getX(x, w, l, i) {
				var g = 40;
				if (l % 2 == 0) {
					if (i % 2 == 0) {
						return x - (g + w) * ((i + 2) / 2);
					} else {
						return x + (g + w) * ((i + 1) / 2);
					}
				} else {
					if (i == 0) {
						return x;
					} else if (i % 2 == 1) {
						return x - (g + w) * ((i + 1) / 2);
					} else {
						return x + (g + w) * (i / 2);
					}
				}
			}
		}
		
	});
</script>
